+<template>
  <div>
    <div v-if="list.length>0">
      <div class="comment_list" v-for="(item, index) in list" :key="index">
        <div class="comment_name " v-if="list.length !== 0">
          {{ item.telephone }}
          <span class="comment_date"> {{ item.review_time }}</span>
        </div>
        <div>
          <ul class="comment_star">
            <li>
              <span>口感</span>
              <el-rate :value="item.star_level" void-icon-class="icon-rate-face-off" show-score text-color="#ff9900"
        disabled>
              </el-rate>
            </li>
            <li>
              <span>配送</span>
              <el-rate :value="item.delivery" void-icon-class="icon-rate-face-off" show-score text-color="#ff9900"
      disabled>
              </el-rate>
            </li>
            <li>
              <span>包装</span>
              <el-rate :value="item.package" void-icon-class="icon-rate-face-off" show-score text-color="#ff9900"
                disabled>
              </el-rate>
            </li>
          </ul>
        </div>
        <div class="text">
          {{ item.product_review }}
        </div>
      </div>
    </div>
    <div v-else>
      <el-empty description="暂无评价"></el-empty>
    </div>
  </div>
</template>

<script>
import { showProductReview } from '@/api/index';
export default {
  name: 'KodaiPin',
  props: {
    product_id: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: []
    };
  },

  mounted () {
    console.log();
    showProductReview(this.product_id).then(res => {
      this.list = res.data.data
      console.log(this.list);
    })
  },

  methods: {

  },
};
</script>

<style lang="scss" scoped>
.comment_list {
  text-align: left;
  margin: 24px 0;
  border-bottom: 1px solid #A4A4A4;
}

.comment_date {
  float: right;
  line-height: 14px;
  font-size: 12px;
  color: #A4A4A4;
}

.comment_star li {
  display: flex;
  height: 14px;
  padding: 7px 0;
}

.comment_star li span {
  margin-right: 10px;
  color: #aaaab2;
  font-size: small;
}

.comment_list .text {
  line-height: 20px;
  font-size: 15px;
  margin: 20px 0;
}
</style>